<template>
    <div id="comb_view">
        <div id="game_219" class="game_view">
            <table class="u-table2">
                <thead>
                <tr>
                    <th style="width: 4%;">色波</th>
                    <th style="width: 50%;">号</th>
                    <th style="width: 6%;">赔率</th>
                    <th style="width: 10%;">金额</th>
                </tr>
                </thead>
                <tbody>
                    <TrItem :key="i" v-for="(row,i) in list[0]" :row="row" :bet-number="betNumber" ></TrItem>
                </tbody>
            </table>
            <table class="u-table2 mt10">
                <thead>
                <tr>
                    <th colspan="12" style="display:none">色波</th>
                </tr>
                <tr>
                    <th style="width: 4%;">半波</th>
                    <th style="width: 6%;">赔率</th>
                    <th style="width: 10%;">金额</th>
                    <th style="width: 4%;">半波</th>
                    <th style="width: 6%;">赔率</th>
                    <th style="width: 8%;">金额</th>
                    <th style="width: 4%;">半波</th>
                    <th style="width: 6%;">赔率</th>
                    <th style="width: 8%;">金额</th>
                </tr>
                </thead>
                <tbody>
                    <TrItem :key="i" v-for="(row,i) in list[1]" :row="row" :bet-number="betNumber" :show-numbers="false"></TrItem>
                </tbody>
            </table>
            <table class="u-table2 mt10">
                <thead>
                <tr>
                    <th colspan="12" style="display:none">色波</th>
                </tr>
                <tr>
                    <th style="width: 4%;">半半波</th>
                    <th style="width: 6%;">赔率</th>
                    <th style="width: 10%;">金额</th>
                    <th style="width: 4%;">半半波</th>
                    <th style="width: 6%;">赔率</th>
                    <th style="width: 8%;">金额</th>
                    <th style="width: 4%;">半半波</th>
                    <th style="width: 6%;">赔率</th>
                    <th style="width: 8%;">金额</th>
                </tr>
                </thead>
                <tbody>
                    <TrItem :key="i" v-for="(row,i) in list[2]" :row="row" :bet-number="betNumber" :show-numbers="false"></TrItem>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
    import TrItem from "../components/TrItem";
    import {mapState} from "vuex";

    export default {
        name: 'SeBo',
        components: {
            TrItem
        },
        data() {
            return {
                list:[
                    //色波
                    [
                        [
                            {id:24842,name:'红波',bet:2.7,
                                number:['01','02','07','08','12','13','18','19','23','24','29','30','34','35','40','45','46'],
                                selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24844,name:'蓝波',bet:2.9,
                                number:['03','04','09','10','14','15','20','25','26','31','36','37','41','42','47','48'],
                                selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24847,name:'绿波',bet:2.9,
                                number:['05','06','11','16','17','21','22','27','28','32','33','38','39','43','44','49'],
                                selected:false,hovering:false,amount:''},
                        ],
                    ],
                    // 半波
                    [
                        [
                            {id:24854,name:'红单',bet:5.4,selected:false,hovering:false,amount:''},
                            {id:24855,name:'蓝单',bet:5.4,selected:false,hovering:false,amount:''},
                            {id:24855,name:'绿单',bet:5.4,selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24854,name:'红双',bet:5.4,selected:false,hovering:false,amount:''},
                            {id:24855,name:'蓝双',bet:5.4,selected:false,hovering:false,amount:''},
                            {id:24855,name:'绿双',bet:5.4,selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24854,name:'红大',bet:3.7,selected:false,hovering:false,amount:''},
                            {id:24855,name:'蓝大',bet:3.7,selected:false,hovering:false,amount:''},
                            {id:24855,name:'绿大',bet:5.4,selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24854,name:'红小',bet:3.7,selected:false,hovering:false,amount:''},
                            {id:24855,name:'蓝小',bet:3.7,selected:false,hovering:false,amount:''},
                            {id:24855,name:'绿小',bet:5.4,selected:false,hovering:false,amount:''},
                        ],
                    ],
                    // 半半波
                    [
                        [
                            {id:24854,name:'红大单',bet:13.5,selected:false,hovering:false,amount:''},
                            {id:24855,name:'蓝大单',bet:8,selected:false,hovering:false,amount:''},
                            {id:24855,name:'绿大单',bet:13.5,selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24854,name:'红大双',bet:10.5,selected:false,hovering:false,amount:''},
                            {id:24855,name:'蓝大双',bet:10.5,selected:false,hovering:false,amount:''},
                            {id:24855,name:'绿大双',bet:10.5,selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24854,name:'红大',bet:3.7,selected:false,hovering:false,amount:''},
                            {id:24855,name:'蓝大',bet:3.7,selected:false,hovering:false,amount:''},
                            {id:24855,name:'绿大',bet:5.4,selected:false,hovering:false,amount:''},
                        ],
                        [
                            {id:24854,name:'红小单',bet:3.7,selected:false,hovering:false,amount:''},
                            {id:24855,name:'蓝小单',bet:3.7,selected:false,hovering:false,amount:''},
                            {id:24855,name:'绿小单',bet:5.4,selected:false,hovering:false,amount:''},
                        ],
                    ]
                ]
            }
        },
        computed:{
            ...mapState(['betNumber'])
        },
        watch:{
            betNumber(nVal){
                this.list.forEach((arr)=>{
                    arr.forEach((item)=>{
                        item.forEach((o)=>{
                            if (o.selected) {
                                o.amount = nVal
                            }
                        })
                    })
                })
                this.$forceUpdate()
            }
        },
        methods: {

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
